<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--semantic-ui的cdn引入-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>

    <!--导航部分-->
    <nav th:replace="_fragments ::menu" class="ui inverted attached segment">
        <div class="container">
            <div class="ui inverted stackable menu">
                
                <h2 class="ui teal header item m-padding-up-dowm-min">LOG</h2>

                <a href="" class="item"><i class="home icon"></i>首页</a>

                <a href="" class="item"><i class="edit icon"></i>分类</a>

                <a href="" class="item"><i class="tags icon"></i>标签</a>

                <a href="" class="item"><i class="print icon"></i>关于我</a>

                <!--搜索栏-->
                <div class="right item">
                <div class="ui icon inverted transparent input">
                    <i class="search link icon"></i>
                    <input type="text" placeholder="搜索">
                </div>
                </div>
            </div>
        </div>
    </nav>

    <!--中间内容-->
    <div class="m-footer-padding-up-dowm-min">
        <div class="ui container">
            <div class="ui grid left">

                <!--left-->
                <div class="eleven wide column transparent animate__animated animate__fadeInLeft">

                    <!--标头-->
                    <div class="ui top attached segment">
                        <!--指定两列-->
                        <div class="ui two column grid">

                            <div class="column">
                                <h3 class="ui teal header">博客</h3>
                            </div>

                            <div class="column right aligned">
                                共<h3 class="ui orange header m-inline-block" th:text="${page.totalElements}">3</h3>篇
                            </div>
                        </div>
                    </div>

                    <!--内容-->
                    <div class="ui attached segment">

                        <div class="ui vertical segment" th:each="blog : ${page.content}">
                            <div class="ui grid">

                                <!--文章主体部分-->
                                <div class="eleven wide column">
                                    <!--文章标题-->
                                    <h3 class="ui header">
                                        <a href="#" style="color: #000000" th:text="${blog.title}" th:href="@{/blog/{id}(id = ${blog.id})}">标题</a>
                                    </h3>
                                    <!--文章内容-->
                                    <p th:text="${blog.description}">
                                        文章描述
                                    </p>
                                    <!--底部的按钮-->
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list mini">
                                                <!--跟新时间-->
                                                <div class="item">
                                                    <i class="user icon"></i><span th:text="${blog.user.nickname}">lgb</span>
                                                </div>
                                                <!--跟新时间-->
                                                <div class="item">
                                                    <i class="book icon"></i><span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2023-7-13</span>
                                                </div>
                                                <!--浏览次数-->
                                                <div class="item">
                                                    <i class="eye icon"></i><span th:text="${blog.view_times}">114514</span>
                                                </div>
                                            </div>
                                        </div>
        
                                        <!--所属分类-->
                                        <div class="five wide column right aligned">
                                            <a href="#" class="ui basic teal mini label" th:text="${blog.type.name}">所属分类</a>
                                        </div>
                                    </div>

                                </div>

                                <!--图片部分-->
                                <div class="five wide column">
                                    <img src="https://picsum.photos/id/237/200/150" th:src="@{${blog.picture}}" class="ui rounded image">
                                </div>

                            </div>
                        </div>

                    </div>

                    <!--分页按钮-->
                    <div class="ui bottom attached segment">
                        <!--指定两列-->
                        <div class="ui two column grid">

                            <div class="column">
                                <button class="ui teal basic mini button" th:href="@{/(page = ${page.number} - 1)}">上一页</button>
                            </div>

                            <div class="column right aligned">
                                <button class="ui teal basic mini button" th:href="@{/(page = ${page.number} + 1)}">下一页</button>
                            </div>

                        </div>
                    </div>

                </div>

                <!--right-->
                <div class="five wide column animate__animated animate__fadeInRight">

                    <!--公告部分-->
                    <div class="stereoscopic_effect transparent">
                        <div class="ui segment">
                            <h4 class="ui horizontal divider header">公告栏</h4>
                            <div class="ui message">
                                <p th:text="${announcement.content}"></p>
                            </div>
                            <div style="display: flex !important;justify-content: center !important;">
                                <p th:text="'更新时间:' + ${announcement.createTime}">更新时间</p>
                            </div>
                        </div>
                    </div>

                    <!--分类-->
                    <div class="ui segments stereoscopic_effect transparent">
                            <div class="ui secondary segment">

                                <div class="ui two column grid">
                                    <div class="column"><h4>分类</h4></div>
                                    <div class="right aligned column"><a href="#" th:href="@{/types/-1}">more</a></div>
                                </div>

                            </div>

                            <div class="ui segment">
                                <div class="ui fluid vertical menu">
                                    <div class="item" th:each="type : ${types}">
                                        <!--分类名称-->
                                        <span th:text="${type.name}"></span>
                                        <!--纪录有几个日志文件-->
                                        <div class="ui basic left pointing label" th:text="${#arrays.length(type.blogs)}">13</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    <!--用户留言部分-->
                    <div class="ui segments stereoscopic_effect transparent">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column"><h4>留言区</h4></div>
                            </div>
                        </div>
                        <div class="ui segment">
                            <form class="ui form" th:action="@{/message}" method="post">
                                <div class="field">
                                    <textarea placeholder="请输入你的留言...." name="content"></textarea>
                                </div>
                                <div style="display: flex !important;justify-content: center !important;">
                                    <button class="ui submit button basic center aligned" type="submit">提交</button>
                                </div>
                                <!--表单验证信息 默认在ui error message里提示-->
                                <div class="ui error message"></div>
                            </form>
                        </div>
                        <!--消息提示-->
                        <div class="ui success message" th:unless="${#strings.isEmpty(success_message)}" th:text="${success_message}">新增成功</div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <!--底部footer-->
    <footer th:replace="_fragments ::footer" class="ui inverted center aligned vertical segment m-footer-padding-up-dowm-min">
        <div class="container">
            <!--grid:横向分成16份,底下的元素为3+3+3+7-->
            <div class="ui divided  inverted grid">

                <div class="three wide column">
                    <h4 class="ui inverted header">二维码</h4>
                    <img src="..\static\images\二维码.png"  style="width: 80px;">
                </div>

                <div class="three wide column">
                    <h4 class="ui inverted header">个人博客</h4>
                    <div class="ui inverted list link">
                        <a href="#" class="item">1.0 xxx</a>
                        <a href="#" class="item">2.0 xxx</a>
                        <a href="#" class="item">3.0 xxx</a>
                    </div>
                </div>

                <div class="three wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted list link">
                        <a href="#" class="item">微信:13776710591</a>
                        <a href="#" class="item">QQ:2899847639</a>
                        <a href="#" class="item">GitHub:xxxxxxx</a>
                    </div>
                </div>

                <div class="seven wide column">
                    <h4 class="ui inverted header">个人博客</h4>
                    <p>
                        emmm,你要说点什么
                    </p>
                </div>
            </div>

            <!--一条线-->
            <div class="ui inverted section divider"></div>
            <p>emmm,你要说点什么</p>

        </div>
    </footer>

    <!--引入jquery和semantic-ui-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script>
        //表单验证
        $('.ui.form').form({
            fields: {
                //content部分
                content: {
                    //和name保存一致
                    identifier: 'content',
                    //规则
                    rules: [{
                        type: 'empty',
                        prompt: '请输入留言内容'
                    }]
                },
            }
        })
    </script>
</body>
</html>